<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="public/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Vue3的组件的相关演示 </title>
  <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
  <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
  <link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
  <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
  <!--axios-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    // 假定 src在网站根目录
    let basrUrl = '/src/' 
    // 判断所处网站，确定基础url
    switch (window.location.origin) {
      case 'https://naturefwvue.github.io': //github
      case 'https://naturefw.gitee.io': //gitee
        basrUrl = '/nf-vue-cnd/cnd/project-template/src/'
        break
    }
    window.__ver = '?v=7'
    window.__basrUrl = basrUrl

  </script>
  
  <script type="text/javascript">
    // 封装一个异步加载动态组件的方法
    window.myImport = (url) => {
      return new Promise((resolve, reject) => {
        const ver = window.__ver
        const _url = window.__basrUrl + url
        // 先加载js
        import(_url + '.js' + ver).then((resjs) => {
          const js = resjs.default
          if (js.template === '') {
            // 如果模板是空的，表示需要加载html文件作为模板
            // 此处可以做缓存。
            axios
              .get(_url + '.html' + ver)
              .then((resHTML) => {
                js.template = resHTML.data
                resolve(js)
              })
          } else {
            // 否则直接使用js注册组件
            resolve(js)
          }
        })
      })
    }
  </script>
  <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    #nav {
      padding: 30px;
    }
    #nav a {
      font-weight: bold;
      color: #2c3e50;
    }
    #nav a.router-link-exact-active {
      color: #42b983;
    }
    </style>
</head>
<body>
  <div>
    Vue3的组件的演示... 如果你没看到“首页”的内容，说明网页没有在网站的更目录。
  </div>
  <div id="app">
    <div id="nav">
      <p>
        <router-link :to="{name:'Home'}">首页</router-link>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'About'}">动态组件</router-link>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'component'}">异步组件</router-link>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'store'}">状态管理</router-link>&nbsp;&nbsp;&nbsp;
      </p>
      <hr>
      <div style="text-align: left;margin-left: 100px;height: 650px;">
        <router-view></router-view>
      </div>
    </div>
    <hr>
    <div style="text-align: left;">
      vuex状态演示<br>
      $store.state ：{{$store.state}} <br>
     
      <el-button type="primary" @click="setCount">更改状态</el-button><br>
    </div>
    
  <script type="module">
    // 加载文件的话，有时候会卡，不知道为啥卡。。。
    const _url = window.__basrUrl
    Promise.all([
      import(_url + 'app.js' + __ver),
      import(_url + 'store/index.js' + __ver),
      import(_url + 'router/index.js' + __ver)
    ]).then((res) => {
      // 创建vue3的实例
      const app = Vue.createApp(res[0].default)
        .use(res[1].default) // 挂载vuex
        .use(res[2].default) // 挂载路由
        .use(ElementPlus) // 加载ElementPlus
        .mount('#app') // 挂载Vue的app实例
    })

  </script>
</body>
</html>

